<template>
  <el-form>
    <el-row>
      <el-col :span="12">
        <el-form-item  :label="$t('profile.headsculpture')">
           <single-upload v-model="user.avatar"
                         style="width: 100%;display: inline-block;margin-left: 10px"></single-upload>
        </el-form-item>
      </el-col>
    </el-row>
     <el-row> 
    <el-col :span="12">
    <el-form-item  :label="$t('profile.Name')">
      <el-input v-model.trim="user.nickname" />
    </el-form-item>
     </el-col>
     </el-row>
      
    <el-form-item>
      <el-button :loading="loading" type="primary" @click.native.prevent="submit">{{ $t('pagepublic.Modify') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {update} from '@/api/sysUser'
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          id:'',
          nickname: '',
          remark: '',
          avatar:''
        }
      }
    }
  },
  data() {
    return {
      loading: false, // 按钮防双击
    }
  },
  methods: {
    submit() {
      var _this = this
      _this.loading = true;
      update({id:_this.user.id,avatar:_this.user.avatar,nickname:_this.user.nickname,remark:_this.user.remark}).then(response => {
        _this.loading = false;
        _this.$message({
          message: response.content,
          offset: 120,
          center: true
        });
      }).catch(error => {
        _this.loading = false;
      });
    }
  }
}
</script>
